<template>
    <el-row>
        <el-col :span="10">
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="赛事名称" prop="title" 
                    :rules="[ { required: true, message: '赛事名称不能为空'} ]">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="赛事缩写" prop="title_code"
                    :rules="[ { required: true, message: '赛事名称不能为空'} ]">
                    <el-input v-model="form.title_code"></el-input>
                </el-form-item>
                <el-form-item label="赛事日期">
                    <el-date-picker
                        style="width:100%"
                        value-format="yyyy-MM-dd"
                        v-model="form.event_date"
                        type="daterange"
                        :clearable="false"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="报名日期">
                    <el-date-picker
                        style="width:100%"
                        value-format="yyyy-MM-dd"
                        v-model="form.enroll_date"
                        type="daterange"
                        :clearable="false"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="显示公告">
                    <el-switch v-model="form.notice_enable"></el-switch>
                </el-form-item>
                <el-form-item label="中文公告">
                    <el-input v-model="form.notice" type="textarea" :autosize="{ minRows: 1, maxRows: 5}"></el-input>
                </el-form-item>
                <el-form-item label="英文公告">
                    <el-input v-model="form.notice_en" type="textarea" :autosize="{ minRows: 1, maxRows: 5}"></el-input>
                </el-form-item>
                <el-form-item label="显示中英文">
                    <el-switch v-model="form.lang_enable"></el-switch>
                </el-form-item>
                <el-form-item label="显示国家选项">
                    <el-switch v-model="form.country_enable"></el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="save">保存设置</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="12">
        </el-col>
    </el-row>
</template>

<script>

export default {
    data() {
      return {
        configs: null,
        form: {
          title: '',
          title_code: '',
          notice_enable: false,
          notice: '',
          notice_en: '',
          event_date: [],
          enroll_date: [],
          lang_enable: true,
          country_enable: true
        }
      }
    },
    mounted() {
        this.$ConfigService.getAllConfigs()
            .then(configs => {
                this.configs = configs;
                this.reset();
            })
    },
    methods: {
        reset() {
            this.form.title = this.configs['TITLE'];
            this.form.title_code = this.configs['TITLE_CODE'];
            this.form.event_date = [this.configs['EVENT_DATE_START'], this.configs['EVENT_DATE_END']];
            this.form.enroll_date = [this.configs['ENROLL_DATE_START'], this.configs['ENROLL_DATE_END']];
            this.form.notice_enable = this.configs['NOTICE_ENABLE'] == '1';
            this.form.notice = this.configs['NOTICE_zh-CN'];
            this.form.notice_en = this.configs['NOTICE_en'];
            this.form.lang_enable = this.configs['CHANGE_LANG'] == '1';
            this.form.country_enable = this.configs['SHOW_COUNTRY'] == '1';
        },

        save() {
            this.$refs['form'].validate((valid) => {
                if (!valid) { return; }
                let configs = {};
                configs['TITLE'] = this.form.title;
                configs['TITLE_CODE'] = this.form.title_code;
                configs['EVENT_DATE_START'] = this.form.event_date[0];
                configs['EVENT_DATE_END'] = this.form.event_date[1];
                configs['ENROLL_DATE_START'] = this.form.enroll_date[0];
                configs['ENROLL_DATE_END'] = this.form.enroll_date[1];
                configs['NOTICE_ENABLE'] = + this.form.notice_enable;
                configs['NOTICE_zh-CN'] = this.form.notice;
                configs['NOTICE_en'] = this.form.notice_en;
                configs['CHANGE_LANG'] = + this.form.lang_enable;
                configs['SHOW_COUNTRY'] = + this.form.country_enable;
                
                let requests = [];
                for(let prop in configs) {
                    let val = configs[prop];
                    requests.push(this.$ConfigService.modifyConfig(prop, val));
                }

                Promise.all(requests).then(ret => {
                    let success = true;
                    for(let r in ret) {
                        if (!r) {
                            this.$notify.error({
                                title: '更新失败',
                                message: '赛事信息修改时发生错误',
                                type: 'success'
                            });
                            success = false;
                        }
                    }
                    if (success) {
                        this.$notify({
                            title: '更新成功',
                            message: '赛事信息修改成功',
                            type: 'success'
                        });
                    }
                });
            });
        }
    }
}
</script>

<style></style>
